<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Advanced controls</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Winforms, Mono, Visual Basic, advanced controls, programming, tutorial">
<meta name="description" content="Advanced controls">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Advanced controls</h1>


<p>
In this part of the Visual Basic Winforms tutorial, we introduce some 
more advanced controls. Namely the
<b class="keyword">ListBox</b>, the <b class="keyword">ListView</b> and 
the <b class="keyword">TreeView</b> control.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<h2>ListBox Control</h2>

<p>
The <b class="keyword">ListBox</b> control is used to display a list of 
items. Users can select one or more items by clicking on them. 
</p>


<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows how to use
' the ListBox control. Item selected from 
' the ListBox is shown in the statusbar.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Private sb As StatusBar 

    Public Sub New

       Me.Text = "ListBox"
       Me.Size = New Size(210, 210)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim lb As New ListBox
        lb.Parent = Me
        lb.Items.Add("Jessica")
        lb.Items.Add("Rachel")
        lb.Items.Add("Angelina")
        lb.Items.Add("Amy")
        lb.Items.Add("Jennifer")
        lb.Items.Add("Scarlett")

        lb.Dock = DockStyle.Fill
        
        sb = New StatusBar
        sb.Parent = Me

        AddHandler lb.SelectedIndexChanged, AddressOf Me.OnChanged
        
    End Sub

    Private Sub OnChanged(ByVal sender As Object, ByVal e As EventArgs)
        sb.Text = sender.SelectedItem
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
Our example shows a listbox with six names. The selected item is shown in the statusbar. 
</p>

<pre class="explanation">
 Dim lb As New ListBox
 lb.Parent = Me
</pre>

<p>
<b class="keyword">ListBox</b> control is created. 
</p>

<pre class="explanation">
 lb.Items.Add("Jessica")
</pre>

<p>
This is how we add a new item to the <b class="keyword">ListBox</b> control. 
The control has the <b class="keyword">Items</b>
property. The property is a reference to the list of items in a listbox. 
Using this reference, we can add, remove or get count
of items of the listbox. 
</p>

<pre class="explanation">
 AddHandler lb.SelectedIndexChanged, AddressOf Me.OnChanged
</pre>

<p>
<b class="keyword">SelectedIndexChanged</b> event is triggered, when we select an item. 
</p>

<pre class="explanation">
 sb.Text = sender.SelectedItem
</pre>

<p>
Inside the <b class="keyword">OnChanged</b> method, we set 
the selected text to the statusbar.
</p>


<br>
<img src="/img/gui/vbwinf/listbox.png" alt="ListBox">
<div class="figure">Figure: ListBox</div>


<h2>ListView</h2>

<p>
<b class="keyword">ListView</b> control is used to display collections of items. 
It is a more sophisticated control
than the <b class="keyword">ListBox</b> control. It can display data in various 
views is mostly used to display data in multicolumn views. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows how to use
' the ListView control. Item selected from 
' the ListView is shown in the statusbar.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing
Imports System.Collections.Generic


Public Class Actress

    Public Dim m_name As String
    Public Dim m_year As Integer
 
    Public Sub New(ByVal name As String, ByVal year As Integer)
        Me.m_name = name
        Me.m_year = year
    End Sub
 
End Class



Public Class WinVBApp
    Inherits Form

    Private Dim sb As StatusBar 
    Private Dim lv As ListView

    Public Sub New

       Me.Text = "ListView"
       Me.Size = New Size(350, 300)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim actresses As New List(Of Actress)

        actresses.Add(New Actress("Jessica Alba", 1981))
        actresses.Add(New Actress("Angelina Jolie", 1975))
        actresses.Add(New Actress("Natalie Portman", 1981))
        actresses.Add(New Actress("Rachel Weiss", 1971))
        actresses.Add(New Actress("Scarlett Johansson", 1984))


        Dim name As New ColumnHeader
        name.Text = "Name"
        name.Width = -1
        Dim year As New ColumnHeader
        year.Text = "Year"

        Me.SuspendLayout

        lv = New ListView
        lv.Parent = Me
        lv.FullRowSelect = True
        lv.GridLines = True
        lv.AllowColumnReorder = True
        lv.Sorting = SortOrder.Ascending
        lv.Columns.AddRange(New ColumnHeader() {name, year})
        
        For Each act As Actress In actresses
            Dim item As New ListViewItem
            item.Text = act.m_name
            item.SubItems.Add(act.m_year.ToString())
            lv.Items.Add(item)
        Next

        lv.Dock = DockStyle.Fill

        sb = New StatusBar
        sb.Parent = Me
        lv.View = View.Details

        Me.ResumeLayout

        AddHandler lv.Click, AddressOf Me.OnChanged
        AddHandler lv.ColumnClick, AddressOf Me.OnColumnClick
        
    End Sub

    Private Sub OnChanged(ByVal sender As Object, ByVal e As EventArgs)

        Dim name As String = lv.SelectedItems(0).SubItems(0).Text
        Dim born As String = lv.SelectedItems(0).SubItems(1).Text
        sb.Text = name &amp; ", " &amp; born

    End Sub
    
    Private Sub OnColumnClick(ByVal sender As Object, _
                    ByVal e As ColumnClickEventArgs)
    
        If sender.Sorting = SortOrder.Ascending
            sender.Sorting = SortOrder.Descending
        Else 
            sender.Sorting = SortOrder.Ascending
        End If
        
    End Sub

    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
In our example, we have a listview with two columns. In the first column, 
we display the name of the actress. In the second one their date of birth. 
The data is store in a <b class="keyword">List</b> collection. By selecting a row, the
data in a row is displayed in the statusbar. Also, by clicking on the 
column header, the data is sorted. 
</p>

<pre class="explanation">
 Public Class Actress
     ...
 End Class
</pre>

<p>
We use the <b class="keyword">Actress</b> class to store our data. 
</p>

<pre class="explanation">
 Dim actresses As New List(Of Actress)

 actresses.Add(New Actress("Jessica Alba", 1981))
 actresses.Add(New Actress("Angelina Jolie", 1975))
 ...
</pre>

<p>
We create and fill our collection with items. 
</p>

<pre class="explanation">
 Dim name As New ColumnHeader
 name.Text = "Name"
 name.Width = -1
</pre>

<p>
For each column in a listview, we create a <b class="keyword">ColumnHeader</b>. 
By setting the  <b class="keyword">Width</b>
to -1, the width of the column is equal to the longest item in the column. 
</p>

<pre class="explanation">
 lv = New ListView
 lv.Parent = Me
</pre>

<p>
<b class="keyword">ListView</b> control is created. 
</p>

<pre class="explanation">
 lv.FullRowSelect = True
 lv.GridLines = True
 lv.AllowColumnReorder = True
 lv.Sorting = SortOrder.Ascending
</pre>

<p>
Here we set four properties of the control. This code lines enable full row selection, show grid lines,
allow column reordering by dragging the columns and sort the data in ascending order.
</p>

<pre class="explanation">
 lv.Columns.AddRange(New ColumnHeader() {name, year})
</pre>

<p>
Here we add two <b class="keyword">ColumnHeader</b>s to the <b class="keyword">ListView</b> control. 
</p>

<pre class="explanation">
 For Each act As Actress In actresses
     Dim item As New ListViewItem
     item.Text = act.m_name
     item.SubItems.Add(act.m_year.ToString())
     lv.Items.Add(item)
 Next
</pre>

<p>
This cycle populates the listview control. Each row is added to the 
listview as a <b class="keyword">ListViewItem</b> class.
</p>


<pre class="explanation">
 lv.View = View.Details
</pre>

<p>
The <b class="keyword">ListView</b> control can have different views. 
Different views display data differently.
</p>


<pre class="explanation">
 Dim name As String = lv.SelectedItems(0).SubItems(0).Text
 Dim born As String = lv.SelectedItems(0).SubItems(1).Text 
 sb.Text = name &amp; ", " &amp; born
</pre>

<p>
Inside the <b class="keyword">OnChanged</b> method, we get the data 
from the selected row and show it on the statusbar. 
</p>


<pre class="explanation">
 If sender.Sorting = SortOrder.Ascending
     sender.Sorting = SortOrder.Descending
 Else 
     sender.Sorting = SortOrder.Ascending
 End If
</pre>

<p>
Here we toggle the sorting order of the column. 
</p>

<br>
<img src="/img/gui/vbwinf/listview.png" alt="ListView">
<div class="figure">Figure: ListView</div>


<h2>TreeView</h2>

<p>
<b class="keyword">TreeView</b> control displays hierarchical collection of items. Each item in this 
control is represented by a <b class="keyword">TreeNode</b> object. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows how to use
' the ListBox control. Item selected from 
' the ListBox is shown in the statusbar.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Private Dim sb As StatusBar 
    Private Dim WithEvents tv As TreeView

    Public Sub New

       Me.Text = "TreeView"
       Me.Size = New Size(250, 250)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        tv = New TreeView

        Dim root As New TreeNode
        root.Text = "Languages"

        Dim child1 As New TreeNode
        child1.Text = "Python"

        Dim child2 As New TreeNode
        child2.Text = "Ruby"

        Dim child3 As New TreeNode
        child3.Text = "Java"

        root.Nodes.AddRange(New TreeNode() {child1, child2, child3})

        tv.Parent = Me
        tv.Nodes.Add(root)
        tv.Dock = DockStyle.Fill

        sb = New StatusBar
        sb.Parent = Me

        
    End Sub

    Private Sub OnSelected(ByVal sender As Object, _
            ByVal e As TreeViewEventArgs) Handles tv.AfterSelect
        sb.Text = e.Node.Text
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
This is a very simple demonstration of the <b class="keyword">TreeView</b> control. We have one root item
and three children. 
</p>


<pre class="explanation">
 tv = New TreeView
</pre>

<p>
We create the <b class="keyword">TreeView</b> control.
</p>

<pre class="explanation">
 Dim root As New TreeNode
 root.Text = "Languages"
 ...
 tv.Nodes.Add(root)
</pre>

<p>
Here we create a root node. 
</p>

<pre class="explanation">
 Dim child1 As New TreeNode
 child1.Text = "Python"
</pre>

<p>
Child node is created in a similar way. 
</p>

<pre class="explanation">
 root.Nodes.AddRange(New TreeNode() {child1, child2, child3})
</pre>

<p>
Child nodes are plugged into the <b class="keyword">Nodes</b> property of the root node. 
</p>

<pre class="explanation">
 Private Sub OnSelected(ByVal sender As Object, _
         ByVal e As TreeViewEventArgs) Handles tv.AfterSelect
     sb.Text = e.Node.Text
 End Sub
</pre>

<p>
Another way to work with the events is to use the <b class="keyword">Handles</b> keyword.
</p>

<br>
<img src="/img/gui/vbwinf/treeview.png" alt="TreeView">
<div class="figure">Figure: TreeView</div>


<hr class="btm">

<p>
In this part of the Visual Basic Winforms tutorial, we covered three advanced controls
available in Winforms library.
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 3, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

